<template>
  <div class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @ss="addlist" :arr="list"></TodoHeader>
    <TodoMain :arr="showlist" @dellist="dellist"></TodoMain>
    <TodoFooter :len="this.list==null?0:this.list.length"
                @changgeType="typeFn"
                @dellll="delmadedlist"></TodoFooter>
  </div>
</template>

<script>
// 1.0 样式引入
import "./style/base.css"
import "./style/index.css"

import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";


export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem("todolist"))||[],
      listtype:'all'
    };
  },
  methods:{
    addlist(name){

        let id=this.list.length==0?1:this.list[this.list.length-1].id+1
        this.list.push({id,name,isDone: false})

    },
    dellist(index){
      this.list.splice(index,1)
    },
    typeFn(str){//'all','yes','no'
          this.listtype=str

    },
    delmadedlist(){
      this.list= this.list.filter(obj=>obj.isDone==false  )
    }
  },
  computed:{
    showlist(){
      if (this.listtype==='yes'){
        return this.list.filter(obj=>obj.isDone==true)
      }else if(this.listtype==='no'){
        return this.list.filter(obj=>obj.isDone==false)
      }else{
        return this.list
      }
    }
  },
  watch:{
    list:{
      deep:true,
      handler(){
        localStorage.setItem("todolist",JSON.stringify(this.list))
      }
    }
  }
};
</script>